<template>
    <div>
        <FolderSelect />
        <div class="collects">
            <div v-if="smallFavoriteData?.length === 0">
                <span style="font-size: 0.1rem;">该路径下没有收藏夹</span>
            </div>
            <div class="total" v-for="item in smallFavoriteData">
                <div class="content">
                    <span @click="enterSmallFavorite(item)">
                        <el-image :key="item.cover" :src="base_url + item.cover" alt="image" lazy />
                    </span>
                    <div class="content-footer">
                        <div class="text">
                            <p>{{ item.name }}</p>
                        </div>
                        <div class="buttons">
                            <!-- 添加图片/上传图片 -->
                            <icon-add-picture theme="outline" :size="icon_size" fill="#5fc5ba"
                                @click="addButton(item)" />
                            <!-- 删除 -->
                            <icon-delete-one theme="outline" :size="icon_size" fill="#5fc5ba"
                                @click="deleteButton(item)" />
                            <!-- 编辑 -->
                            <icon-editor theme="outline" :size="icon_size" fill="#5fc5ba" @click="editButton(item)" />
                        </div>
                    </div>

                </div>
            </div>
        </div>

        <!-- 添加图片dialog -->
        <el-dialog v-model="addDialog.visible" title="" width="60%" draggable>
            <addPhoto />
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="addDialog.visible = false" round>取消</el-button>
                    <el-button type="primary" @click="confirmAdd" round>确定</el-button>
                </span>
            </template>
        </el-dialog>


        <!-- 删除dialog -->
        <el-dialog v-model="delDialog.visible" title="警告" width="40%" draggable>
            <span>
                是否删除收藏夹?
            </span>
            <p style="font-size: 0.01rem;">提醒：该收藏夹下的所有图片都将删除</p>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="delDialog.visible = false" round>取消</el-button>
                    <el-button type="primary" @click="confirmDel" round>确定</el-button>
                </span>
            </template>
        </el-dialog>


        <!-- 编辑dialog -->
        <el-dialog v-model="editDialog.visible" title="编辑" width="40%" draggable class="edit-dialog">
            <el-input v-model="editDialog.data.name" />
            <el-image :src="base_url + editDialog.data.cover" />
            <div style="display: flex;">
                <span style="width:1.6rem">
                    修改封面
                </span>
                <addCover></addCover>
            </div>

            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="editDialog.visible = false" round>取消</el-button>
                    <el-button type="primary" @click="confirmEdit" round>确定</el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>

<script setup lang="ts">
import { ref, reactive, getCurrentInstance, onMounted } from "vue";
import { get, post } from "@/tools/api/api";
import addPhoto from "@/components/addBox/addPhoto.vue"
import addCover from "@/components/addBox/addCover.vue"
import FolderSelect from "@/components/folder/folderSelect.vue"
import { dialogType } from "@/components/user/type";
import { smallFavoriteDataType } from "@/components/user/type"
import { ElMessage } from "element-plus";
import { usePhotoStore } from "@/store/photo";
import { debounce } from "@/hooks/tools";
import { useRouter } from "vue-router";
/**
 * 初始化
 */
const router = useRouter()
// 引入仓库
const photoStore = usePhotoStore()
const base_url = "http://ergou666.shop:8000";
//创建实例
const instance = getCurrentInstance()


onMounted(() => {
    // 获取小收藏夹
    updateFolderData()
    // 修改仓库数据
    photoStore.$patch((state) => {
        state.showAllLevel = false
    })
})

// 更新数据
instance?.proxy?.$Bus.on("reloadFavorite", () => {
    updateFolderData()
})

//更新小收藏夹数据
const updateFolderData = () => {
    if (photoStore.currentFolder) {
        getSmallFavorite(photoStore.currentFolder[photoStore.currentFolder.length - 1])
    }
}

// 点击进入小收藏夹
const enterSmallFavorite = (item: smallFavoriteDataType) => {
    router.push(`/favorite/${item.id}`);
    photoStore.chosedSmallFolderId = item.id;
}

// 接收小收藏夹的数据
const smallFavoriteData = ref<smallFavoriteDataType[]>([])
//获取选中的收藏夹,并查询小收藏夹
instance?.proxy?.$Bus.on("selectedFolderData", (value: any) => {

    getSmallFavorite(value[value.length - 1])
})

// 查询小收藏夹
const getSmallFavorite = debounce((value: any) => {
    get("getFavorite", {
        method: 0,
        favorite: value
    }).then((res: any) => {
        if (res.code === 100) {
            smallFavoriteData.value = res.data
        }
    })
}, 100);


// dialog数据结构及类型
//添加图标点击事件
const addDialog = reactive<dialogType>({
    visible: false,
    data: ''
})
const addButton = (item: smallFavoriteDataType) => {
    addDialog.visible = true
    addDialog.data = item;
    photoStore.$patch((state) => {
        state.chosedSmallFolderId = item.id;
    })
}
// 确认上传
const confirmAdd = debounce(() => {
    addDialog.visible = false;
})

/**
 * 进入小收藏夹
 */
const enterFavorite = (item: smallFavoriteDataType) => {
    // instance?.proxy
}

/**
 * 编辑
 */
const editDialog = reactive<dialogType>({
    visible: false,
    data: ''
})
// 编辑图标点击事件
const editButton = (item: smallFavoriteDataType) => {
    editDialog.visible = true
    editDialog.data = item;
}
// 确认编辑
const confirmEdit = debounce(() => {
    instance?.proxy?.$Bus.emit("favorData", editDialog.data)
    if (!editDialog.data.name) {
        ElMessage.warning("收藏夹名字不能为空")
        return
    }
    post("editFavorite", {
        favorite: editDialog.data.id,
        name: editDialog.data.name,
        file: editDialog.data.cover
    }).then((res: any) => {
        if (res.code === 100) {
            editDialog.visible = false
            ElMessage.success("修改成功")
            // 通知其它组件更新数据
            instance?.proxy?.$Bus.emit("reloadFolder")
        }
    })
})



/**
 * 删除
 */
const delDialog = reactive<dialogType>({
    visible: false,
    data: ''
})
//删除图标点击事件
const deleteButton = (item: smallFavoriteDataType) => {
    delDialog.visible = true
    delDialog.data = item;
}
// 确认删除
const confirmDel = debounce(() => {
    post("delFavorite", {
        type: "S",
        favorite: delDialog.data.id
    }).then((res: any) => {

        if (res.code === 100) {
            delDialog.visible = false;
            ElMessage.success("已删除收藏夹：" + delDialog.data.name)
            // 通知子组件更新
            instance?.proxy?.$Bus.emit("reloadFolder")
            //更新收藏夹
            updateFolderData();
        }
    })
})

// 图标大小
const icon_size = ref<string>("0.14rem")


</script>

<style lang="scss" scoped>
$item-height: 0.36rem;
$item-width: 0.6rem;
$a-font-size: 0.08rem;
$theme-color: rgb(96, 197, 186); //#5fc5ba

.collects {
    display: flex;
    flex-wrap: wrap;

    .total {
        width: $item-width*4;
        height: $item-width*4;
        background-color: rgb(232, 236, 236);
        border-radius: 0.1rem;
        display: flex;
        justify-content: center;
        margin: 0.1rem;

        .content {
            margin-top: 0.1rem;
            width: 90%;
            height: 98%;

            // 图片样式
            ::v-deep(.el-image) {
                width: 100%;
                height: 85%;
                border-radius: 0.1rem;

                img {
                    width: $item-width*4.5;
                    height: 100%;
                    break-inside: avoid;
                    border-radius: 0.1rem;
                }
            }

            .content-footer {

                // 文字样式
                .text {
                    float: left;
                    font-size: $a-font-size;
                    cursor: pointer;
                }

                // 按钮样式
                .buttons {
                    padding: 0.04rem;
                    width: $item-width*2;
                    height: $item-height*0.6;
                    float: right;
                    display: flex;
                    justify-content: space-around;
                    align-items: center;
                }
            }

        }
    }
}

span {
    cursor: pointer;
}
</style>
